<template>
  <div>
    <el-table
      :data="dataList"
      style="width: 100%"
      >
      <el-table-column prop="name" label="项目">
        <template slot-scope="scope">
          <el-input type="input" placeholder="请输入内容" v-model="scope.row.name"/>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template slot-scope="scope">
          <el-input type="input" placeholder="请输入内容" v-model="scope.row.remark"/>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量">
        <template slot-scope="scope">
          <el-input type="number" placeholder="请输入内容" v-model="scope.row.number"/>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价">
        <template slot-scope="scope">
          <el-input type="number" placeholder="请输入内容" v-model="scope.row.price"/>
        </template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="总价">
        <template slot-scope="scope">
          <el-input type="number" @blur="onBlur" placeholder="请输入内容" v-model="scope.row.totalPrice"/>
        </template>
      </el-table-column>
    </el-table>
    <el-row :span="24" style="display: flex;justify-content: end;margin-top: 20px;">
      <el-col :span="24" :style="'text-align: right;'">
        <el-button type="primary" @click="onAddRow">添加一行</el-button>
      </el-col>
    </el-row>
    <el-row :span="24" style="display: flex;justify-content: end;margin-top: 20px;">
      <el-col :span="24" :style="'text-align: right;'">
        合计总价：<span style="color: red; font-size: 16px;">{{currTotalPrice}}</span>
      </el-col>
    </el-row>
    <el-row :span="24" style="display: flex;justify-content: center;margin-top: 20px;">
      <el-col :span="6" style="text-align: center;">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button type="primary" plain @click="onClose">关闭</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { queryOrderPrice, saveOrderPrice } from '@/api/yzOrderPrice';

export default {
  name: 'orderPriceDetail',
  props: {
    orderInfo: {}
  },
  data() {
    return {
      dataList: [],
      currTotalPrice: 0,
      currBaseInfo: {}
    }
  },
  mounted() {
    this.getOrderPriceList();
  },
  methods: {
    async getOrderPriceList() {
      const params = { orderId: this.orderInfo.id, pageIndex: 0, pageSize: 1000 }
      const { data } = await queryOrderPrice(params);
      if (data.code === 200) {
        const list = data.data.records || [];
        const obj = list.find(item => item.orderId === this.orderInfo.id);
        console.log('obj', obj)
        this.currBaseInfo = obj || {};
        this.dataList = obj && obj['itemList'] ? obj['itemList'] : [];
        this.calculateTotalPrice(this.dataList);
      } else {
        this.$message({
          message: data.msg || '数据获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    onAddRow() {
      const rowObj = { name: '', remark: '', number: 0, price: 0, totalPrice: 0 };
      // console.log('dataList', this.dataList);
      this.dataList && this.dataList.push(rowObj);
    },
    async onSave() {
      // console.log('dataList', this.dataList)
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      const userId = userInfo['id'];
      const params = {
        ...this.currBaseInfo,
        masterHone: userInfo.mobile,
        masterName: userInfo.username,
        masterRolename: '普通用户',
        orderId: this.orderInfo.id, priceTotal: this.currTotalPrice, userId,
        itemList: [...this.dataList]
      }
      const { data } = await saveOrderPrice(params);
      if (data.code === 200) {
        this.$message({
          message: data.msg || '保存成功',
          type: 'success',
        });
        this.$emit('onCloseToggle')
      } else {
        this.$message({
          message: data.msg || '保存失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    onClose() {
      this.$emit('onCloseToggle')
    },
    calculateTotalPrice(list) {
      this.currTotalPrice = 0;
      Array.isArray(list) && list.map(item => {
        this.currTotalPrice += Number.parseFloat(item.totalPrice);
      })
    },
    onBlur() {
      this.calculateTotalPrice(this.dataList)
    }
  }
}
</script>
